<template>
    <div class="mainCenter">
        <div class="title">角色管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="搜索关键词" v-model="keyWord"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchRole"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo" @click="addRole">
                    <el-button type="primary"><el-icon>
                            <Plus />
                        </el-icon>添加角色</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="roleList" fit>
                <el-table-column prop="roleid" label="角色编号" />
                <el-table-column prop="rolename" label="角色名称" />
                <el-table-column prop="remark" label="角色描述" sortable />
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editLimit(scope.$index,scope.row)"><el-icon>
                                <Setting />
                            </el-icon>设置权限</el-button>
                        <el-button type="primary" plain size="small" @click="editRole(scope.$index, scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteRole(scope.$index, scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="isChange" title="角色操作" direction="btt" size="400">
            <EditVue @isShow="getChange" :roleInfo="roleInfo"></EditVue>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import EditVue from './componets/EditVue.vue';
import { reqDeleteRole, reqGetRoleList, reqSearchRole } from '@/api/common'
import { roleType } from '@/types/role';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
const roleInfo=ref<roleType|null>(null)
const roleList = ref<Array<roleType>>([])
const keyWord=ref<string>('')
const isChange = ref<boolean>(true)
const getRoleList = () => {
    reqGetRoleList().then(res => {
        console.log(res);
        
        roleList.value = res.data.data
    })
}

const getChange = (change: boolean) => {
    isChange.value = change
}

const addRole = () => {
    roleInfo.value=null
    isChange.value = true
}

const editRole = (idx: number, item: roleType) => {
    roleInfo.value=item
    isChange.value = true
}
const editLimit=(idx:number,item:roleType)=>{
    router.push({
        path:"/sysSet/role/setLimit",
        query:{
            roleid:item.roleid
        }
    })
}
const searchRole=()=>{
    reqSearchRole(keyWord.value).then(res=>{
        roleList.value=res.data.data
    })
}

const deleteRole=(idx:number,item:roleType)=>{
    elementConfirm().then(()=>{
        reqDeleteRole(item.roleid as number).then(res=>{
            console.log(res);
            if(res.data.code=="200"){
                roleList.value.splice(idx,1)
                tip(res.data.info,'success')
            }else{
                tip(res.data.info,"error")
            }
        })
        
    })
}
onMounted(() => {
    isChange.value = false
    getRoleList()
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -200px;
}
</style>